<template>
  <div class="interview-container">
    <div class="controls">
      <!-- 岗位选择 -->
      <div class="position-selection">
        <label>选择应聘岗位：</label>
        <div class="checkbox-group">
          <label v-for="position in positions" :key="position.id">
            <input
              type="checkbox"
              v-model="selectedPosition"
              :value="position.value"
              @change="handlePositionChange"
              :disabled="isConversationActive"
            >
            {{ position.label }}
          </label>
        </div>
      </div>

      <!-- 操作按钮 -->
      <button
        class="new-conversation-btn"
        @click="startNewConversation"
        :disabled="!selectedPosition"
      >
        开始新对话
      </button>
    </div>

    <!-- 对话历史 -->
    <div class="conversation-history" v-if="isConversationActive">
      <div
        class="message bot-message"
        v-for="(msg, index) in conversationHistory"
        :key="index"
      >
        <div class="sender">AI面试官：</div>
        <div class="content">{{ msg }}</div>
      </div>
    </div>

    <!-- 无对话状态提示 -->
    <div class="no-conversation" v-else>
      请选择岗位并点击"开始新对话"按钮开始模拟面试
    </div>

    <!-- 用户输入区域 -->
    <div class="user-input" v-if="isConversationActive">
      <textarea
        v-model="userAnswer"
        placeholder="请输入你的回答..."
        @keyup.enter="sendAnswer"
      ></textarea>
      <button @click="sendAnswer">发送回答</button>
    </div>
  </div>
</template>

<script>
import api from '../services/api'

export default {
  name: 'Interview',
  data() {
    return {
      // 可选岗位列表
      positions: [
        { id: 1, label: '前端开发工程师', value: 'frontend_developer' },
        { id: 2, label: '后端开发工程师', value: 'backend_developer' },
        { id: 3, label: '产品经理', value: 'product_manager' },
        { id: 4, label: 'UI设计师', value: 'ui_designer' },
        { id: 5, label: '数据分析师', value: 'data_analyst' }
      ],
      selectedPosition: '', // 选中的岗位
      conversationHistory: [], // 对话历史
      userAnswer: '', // 用户当前输入
      conversationId: null, // 当前对话ID
      isConversationActive: false // 是否有活跃对话
    }
  },
  computed: {
    // 检查是否有活跃对话
    isConversationActive() {
      return !!this.conversationId
    }
  },
  methods: {
    // 处理岗位选择变化
    handlePositionChange() {
      // 只允许选择一个岗位
      if (this.selectedPosition.length > 1) {
        this.selectedPosition = [this.selectedPosition[this.selectedPosition.length - 1]]
      }
    },

    // 开始新对话
    async startNewConversation() {
      try {
        this.conversationHistory = []
        this.userAnswer = ''

        // 调用API开始新对话
        const response = await api.interview.startNew(this.selectedPosition[0])

        if (response.data.success) {
          this.conversationId = response.data.conversationId
          this.conversationHistory.push(response.data.firstQuestion)
          this.isConversationActive = true
        }
      } catch (error) {
        console.error('开始新对话失败:', error)
        alert('开始新对话失败，请重试')
      }
    },

    // 发送用户回答
    async sendAnswer() {
      if (!this.userAnswer.trim()) return

      try {
        // 发送回答到后端
        const response = await api.interview.sendAnswer(
          this.conversationId,
          this.userAnswer.trim()
        )

        if (response.data.success) {
          // 清空用户输入
          this.userAnswer = ''
          // 添加AI的追问到对话历史
          this.conversationHistory.push(response.data.nextQuestion)
        }
      } catch (error) {
        console.error('发送回答失败:', error)
        alert('发送回答失败，请重试')
      }
    }
  }
}
</script>

<style>
.interview-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.position-selection {
  flex: 1;
}

.checkbox-group {
  display: inline-block;
  margin-left: 10px;
}

.checkbox-group label {
  margin-right: 15px;
}

.new-conversation-btn {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.new-conversation-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.conversation-history {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.message {
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 4px;
}

.bot-message {
  background-color: #f5f9ff;
}

.sender {
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.content {
  color: #666;
  line-height: 1.5;
}

.no-conversation {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  border: 1px dashed #ccc;
  border-radius: 4px;
}

.user-input {
  display: flex;
  gap: 10px;
}

.user-input textarea {
  flex: 1;
  height: 100px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: none;
}

.user-input button {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  align-self: flex-end;
}
</style>